<!-- 家长考勤页面 -->
<template>
	<view class="checkWrapper">
		<uni-calendar :insert="true" :lunar="false"  :selected="selected"
			@change="change" @monthSwitch="monthSwitch"/>

		<u-table v-if="checkInfo">
			<u-tr>
				<u-th>入园时间</u-th>
				<u-th>离园时间</u-th>
				<u-th>状态</u-th>
				<u-th>入园附件</u-th>
				<u-th>离园附件</u-th>
			</u-tr>
			<u-tr>
				<u-td class="td">{{formatTime(checkInfo.checkInTime, 'hh:MM:ss')}}</u-td>
				<u-td class="td">{{formatTime(checkInfo.checkOutTime, 'hh:MM:ss')}}</u-td>
				<u-td class="td">{{dictFilter(checkInfo.status, 'checkState')}}</u-td>
				<u-td class="td"><view @click="imgClick(checkInfo.checkInMediaUrl)">{{checkInfo.checkInMediaUrl ? '查看':'-'}}</view></u-td>
				<u-td class="td"><view @click="imgClick(checkInfo.checkOutMediaUrl)">{{checkInfo.checkOutMediaUrl ? '查看':'-'}}</view></u-td>
			</u-tr>
		</u-table>
		
		<u-table v-if="leaveShowList.length > 0">
			<u-tr>
				<u-th>请假日期</u-th>
				<u-th>请假时长</u-th>
				<u-th>状态</u-th>
			</u-tr>
			<u-tr v-for="(item, index) in leaveShowList">
				<u-td class="td">{{formatTime(item.leaveDate, 'yyyy/mm/dd')}}</u-td>
				<u-td class="td">{{dictFilter(item.leaveType, 'leaveType')}}</u-td>
				<u-td class="td">{{dictFilter(item.status, 'leaveStatus', {other: '待审核'})}}</u-td>
			</u-tr>
		</u-table>

		<fab @fabClick="addClick"></fab>
	</view>
</template>

<script>
	import Fab from '@/components/fab.vue'
	import {
		getMonthRecords,
		getDailyRecords,
		getLeaveRecord
	} from '../../api/check.js'
	import {
		formatDateByTimestamp,
	} from '@/utils/utils';
	import dictMixin from '@/mixins/dict'
	export default {
		components: {
			Fab
		},
		mixins: [dictMixin],
		data() {
			return {
				month: formatDateByTimestamp(Date.now(), 'yyyy/mm'),
					
				selected: [],
				checkInfo: null,
				
				leaveShowList: [],
				leaveList: [],
			}
		},
		onShow() {
			this.getData();
		},

		methods: {
			getData() {
				this.getLeave();
				this.getAttendanceByMonth();
			},
			getAttendanceByMonth() {
				getMonthRecords(this.month).then(res => {
					console.log(res);
					for (let index in res.data) {
						let item = res.data[index];
						let ob = {
							date: formatDateByTimestamp(item.checkInTime, 'yyyy/mm/dd'),
							info: '签到'
						};
						if (item.checkStatus === 2) {
							ob.info = '离园';
						}
						this.selected.push(ob);
					}
					console.log(this.selected);
				}).catch(error => {
					console.log(error);
				})
			},

			getLeave() {
				console.log(this.month);
				console.log('1111111');
				getLeaveRecord(this.month).then(res => {
					console.log(res);
					this.leaveList = res.data.content;
					for (let index in res.data.content) {
						const item = res.data.content[index];
						let ob = {
							date: formatDateByTimestamp(item.leaveDate, 'yyyy/mm/dd'),
							info: '请假'
						};
						this.selected.push(ob);
					}
				})
			},
			
			getAttendanceByDay(day) {
				getDailyRecords(day).then(res => {
					this.checkInfo = res.data[res.data.length - 1];
				})
			},
			
			change(res) {
				this.checkInfo = null;
				this.leaveShowList = [];
				let extraInfo = res.extraInfo;
				if (!this.$u.test.isEmpty(extraInfo)) {
					this.getAttendanceByDay(extraInfo.date);
					this.leaveFor(extraInfo.date)
				}
			},
			
			monthSwitch(res){
				console.log(res);
				this.checkInfo = null;
				this.leaveShowList = [];
				this.month = `${res.year}/${res.month}`;
				this.getData();
			},
			
			leaveFor(date) {
				this.leaveShowList = [];
				for (let index in this.leaveList) {
					let item  = this.leaveList[index];
					let leaveDate = formatDateByTimestamp(item.leaveDate, 'yyyy/mm/dd');
					if (leaveDate === date) {
						this.leaveShowList.push(item);
					}
				}
			},

			addClick() {
				this.$u.route({
					url: 'pages_sub/check/leave-page'
				});
				
			},
			
			formatTime(timestamp, fmt) {
				if (this.$u.test.isEmpty(timestamp)) {
					return '-';
				}
				return formatDateByTimestamp(timestamp, fmt)
			},

			wrapLeaveState(state) {
				if (state === 1) {
					return '通过';
				} else if (state === 2) {
					return '拒绝';
				}
				return '待审核';
			},
			
			imgClick(url) {
				if (this.$u.test.isEmpty(url)) {
					this.$u.toast('没有附件信息')
				} else {
					uni.previewImage({
						urls: [url]
					});	
				}
			}
		}
	}
</script>

<style lang="scss">
	.checkWrapper {
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	.td {
		height: 50rpx;
		overflow: hidden;
	}
</style>
